@use '../variables';
@use '../../../styles/mixins';

$block: '.#{variables.$ns}label';
$transition-duration: 0.15s;
$transition-timing-function: ease-in-out;

#{$block} {
    --_--bg-color: none;
    --_--bg-color-hover: none;
    --_--text-color: none;
    --_--animation-from: calc(-100% * var(--g-flow-direction));
    --_--animation-to: calc(100% * var(--g-flow-direction));
    --_--gradient-deg: calc(90deg * var(--g-flow-direction));
    --_--gradient-mask-begin-color: rgba(233, 233, 233, 0);
    --_--gradient-mask-end-color: rgba(233, 233, 233, 1);

    display: inline-flex;
    align-items: center;
    position: relative;
    height: var(--_--height);
    border-radius: var(--_--border-radius);
    color: var(--_--text-color);
    background-color: var(--_--bg-color);
    transition-property: opacity, color, background-color;
    transition-duration: $transition-duration;
    transition-timing-function: $transition-timing-function;
    box-sizing: border-box;
    /* make new stacking context to isolate z-indexes */
    isolation: isolate;

    &__animation-container {
        overflow: hidden;
        position: absolute;
        inset: 0;
        border-radius: inherit;

        &::after {
            position: absolute;
            z-index: -1;
            inset: 0;
            content: '';
            background-color: var(--_--gradient-bg-color, var(--_--bg-color));
            mask-image: linear-gradient(
                var(--_--gradient-deg),
                var(--_--gradient-mask-begin-color),
                var(--_--gradient-mask-end-color)
            );

            animation: #{variables.$ns}label 2s linear infinite;
        }
    }

    &__text {
        @include mixins.text-body-short();
        display: flex;
        align-items: baseline;
        margin: 0 var(--_--margin-inline);
        width: 100%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
    }

    &__content,
    &__key {
        text-overflow: ellipsis;
        overflow: hidden;
    }

    &__value {
        display: flex;
        opacity: 0.7;
        overflow: hidden;
    }

    &__separator {
        margin: 0 4px;
    }

    &__main-button {
        @include mixins.button-reset();
        border-radius: inherit;
        z-index: 1;
        height: 100%;

        &:empty {
            position: absolute;
            inset: 0;
        }
    }

    &__addon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--_--height);
        height: var(--_--height);
        border-radius: var(--_--border-radius);

        &_side_start,
        &_side_end {
            position: absolute;
            inset-block-start: 0;
        }

        &_side_start {
            inset-inline-start: 2px;
            border-start-end-radius: 0;
            border-end-end-radius: 0;
        }

        &_side_end {
            inset-inline-end: 0;
            border-start-start-radius: 0;
            border-end-start-radius: 0;
        }

        &_type_button {
            @include mixins.button-reset();
            z-index: 2;
            cursor: pointer;
            color: var(--_--text-color);
            background-color: transparent;
            transition:
                color $transition-duration $transition-timing-function,
                background-color $transition-duration $transition-timing-function,
                variables.$button-shrink-transition;

            &:active {
                transform: variables.$button-shrink-transform;
            }
        }
    }

    &_size {
        &_xs {
            --_--height: 20px;
            --_--border-radius: var(--g-border-radius-xs);
            --_--margin-inline: 8px;
            --_--margin-addon-start: 24px;
            --_--margin-addon-end: 22px;
        }

        &_s {
            --_--height: 24px;
            --_--border-radius: var(--g-border-radius-s);
            --_--margin-inline: 10px;
            --_--margin-addon-start: 28px;
            --_--margin-addon-end: 26px;
        }

        &_m {
            --_--height: 28px;
            --_--border-radius: var(--g-border-radius-m);
            --_--margin-inline: 12px;
            --_--margin-addon-start: 32px;
            --_--margin-addon-end: 32px;
        }
    }

    &_disabled {
        opacity: 0.7;
        pointer-events: none;
    }

    &_interactive {
        cursor: pointer;
    }

    &_width_auto {
        max-width: 100%;
    }

    &_theme {
        &_normal {
            --_--bg-color: var(--g-color-base-misc-light);
            --_--bg-color-hover: var(--g-color-base-misc-light-hover);
            --_--text-color: var(--g-color-text-misc-heavy);
        }

        &_success {
            --_--bg-color: var(--g-color-base-positive-light);
            --_--bg-color-hover: var(--g-color-base-positive-light-hover);
            --_--text-color: var(--g-color-text-positive-heavy);
        }

        &_info {
            --_--bg-color: var(--g-color-base-info-light);
            --_--bg-color-hover: var(--g-color-base-info-light-hover);
            --_--text-color: var(--g-color-text-info-heavy);
        }

        &_warning {
            --_--bg-color: var(--g-color-base-warning-light);
            --_--bg-color-hover: var(--g-color-base-warning-light-hover);
            --_--text-color: var(--g-color-text-warning-heavy);
        }

        &_danger {
            --_--bg-color: var(--g-color-base-danger-light);
            --_--bg-color-hover: var(--g-color-base-danger-light-hover);
            --_--text-color: var(--g-color-text-danger-heavy);
        }

        &_utility {
            --_--bg-color: var(--g-color-base-utility-light);
            --_--bg-color-hover: var(--g-color-base-utility-light-hover);
            --_--text-color: var(--g-color-text-utility-heavy);
        }

        &_unknown {
            --_--bg-color: var(--g-color-base-neutral-light);
            --_--bg-color-hover: var(--g-color-base-neutral-light-hover);
            --_--text-color: var(--g-color-text-complementary);
        }

        &_clear {
            --_--bg-color: transparent;
            --_--bg-color-hover: var(--g-color-base-simple-hover);
            --_--text-color: var(--g-color-text-complementary);
            --_--gradient-bg-color: var(--g-color-base-neutral-light);

            box-shadow: inset 0 0 0 1px var(--g-color-line-generic);
        }
    }

    // Apply margins for addons
    &:has(#{$block}__addon_side_start) &__text {
        margin-inline-start: var(--_--margin-addon-start);
    }
    &:has(#{$block}__addon_side_end) &__text {
        margin-inline-end: var(--_--margin-addon-end);
    }

    // hover styles
    &_interactive:hover:not(
            :has(#{$block}__addon_type_button:not(#{$block}__addon_action_copy):hover)
        ),
    &__addon_type_button:not(#{$block}__addon_action_copy):hover {
        background-color: var(--_--bg-color-hover);
    }

    // focus styles
    &__main-button:focus-visible,
    &__addon_type_button:focus-visible {
        @include mixins.focus-outline();
    }
}

@keyframes #{variables.$ns}label {
    0% {
        transform: translateX(var(--_--animation-from));
    }

    100% {
        transform: translateX(var(--_--animation-to));
    }
}
